import React, {useRef,useEffect} from 'react';
import {Form, Input, message, Modal} from "antd";
import {AreaCascader, Upload} from '../../../components/Index'
import axios from "axios";
import {post} from "../../../service";
function ModalForm(props) {
    const formRef = useRef()
    const layout = {
        labelCol: {span: 4},
        wrapperCol: {span: 20}
    }
    useEffect(() => {
        formRef.current.setFieldsValue(props.data)
        return () => {
        };
    }, []);

    const onSave = (values) => {
       if( props.title==="新增"){
           post('/api/user/add',{...values,area:values.area.join(',')}).then(res=>{
               message.success('添加成功')
               onCancel()
               props.refreshList()
           })
       }
        post('/api/user/update',{...values,area:values.area.join(','),id:props.data.id}).then(res=>{
            message.success('编辑成功')
            onCancel()
            props.refreshList()
        })
    }
    const onCancel = () => {
      props.dispatch({
          type:'hideModalForm'
      })
    }
    const onSaveSubmit = () => {
        formRef.current.submit()
    }
    const onAreaChange = (value) => {
        formRef.current.setFieldsValue({area: value});
    }
    const onPictureChange = (value) => {
        formRef.current.setFieldsValue({picture:value})
    }
    const readonly= props.title == '详情'?true:false
    const  {data} = props
    return (
        <Modal visible width={600} title={props.title} onOk={onSaveSubmit} onCancel={onCancel} className={readonly?'m-readonly-modal':''}>
            <Form {...layout} onFinish={onSave} ref={formRef}>
                <Form.Item label="用户名" name='name' rules={[{required: true, message: '请输入用户名'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label={'账号'} name='account' rules={[{required: true, message: '请输入账号'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label={'所在地区'} name='area' rules={[{required: true, message: '请输入所在地区'}]}>
                    <AreaCascader defaultValue={data.area} onChange={onAreaChange}/>
                </Form.Item>
                <Form.Item label='联系方式' name='tel' rules={[{
                    required: false,
                    message: '请输入联系方式'
                }, {
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    message: '不是合格的手机号'
                }]}>
                    <Input/>
                </Form.Item>
                <Form.Item label={'邮箱'} name='email' rules={[{required: true, message: '请输入邮箱'}, {
                    type: 'email',
                    message: '请输入正确的邮箱格式'
                }]}>
                    <Input/>
                </Form.Item>
                <Form.Item label='上传头像' name='picture'>
                    <Upload defaultFileList={data.picture?data.picture.split(','):[]} onChange={onPictureChange}/>
                </Form.Item>
            </Form>
        </Modal>
    );
}

export default ModalForm;
